<style type="text/css">
    .table th, .table td {
        text-align: center;
        vertical-align: middle!important;
    }
    .table th:nth-child(1), 
    .table td:nth-child(1) {
        width: 10%;
    }  
    .table th:nth-child(2), 
    .table td:nth-child(2)
    {
        width:75%;
    }
    .table th:nth-child(3), 
    .table td:nth-child(3)
    {
        width:15%;
    }
    .pagination li {
        display: inline;
        margin-left: 0.5em;
        margin-right: 0.5em;
    }
    .red {color: red;}
</style>
<div class="col-sm-12" style="margin-top: 50px">
    <div class="form-group">
        <!-- Tìm kiếm -->
        <a href="{{url('/')}}" class="btn btn-default pull-left"><i class="glyphicon glyphicon-arrow-left"></i></a>&nbsp;
        <div class="btn-group">
            <input type="text" name="searchtext" id="search" class="form-control" placeholder="Nhập tên đơn - biểu mẫu" style="width: 100%" value="{{isset($key) && $key != null ? $key : ""}}"/>
            <input type="hidden" name="urlsearch" id="urlsearch" value="{{url('search=dsdontt')}}"/>
        </div>
        <button class="btn btn-default" type="button" id="btnsearch" title="Tìm kiếm đơn - biểu mẫu"><span class="glyphicon glyphicon-search"></span></button>
        <a class="btn btn-default {{isset($key) && $key != null ? "" : "hide"}}"href="{{url('ql=dshosott')}}" title="Reset"><span class="glyphicon glyphicon-remove"></span></a>
        <!--Kết thúc tìm kiếm-->
    </div>
</div>
<!--Bảng danh sách đơn-->
<div class="col-lg-12">
        <table class="table table-bordered table-hover">
            <thead>
                <tr class="label-warning">
                    <th>STT</th>
                    <th>Các loại hồ sơ</th>
                    <th>Tác vụ</th>
                </tr>
            </thead>
            <tbody>
                @foreach($data as $row)
                @if($row != null)
                <tr>
                    <td>{{++$numRows}}</td>
                    <td id="tendon_{{$row->ID}}">{{$row->TEN_BIEU_MAU}}</td>
                    <td>
                        <p id="{{$row->ID}}" class="btn btn-default xemBtn" onclick="xemMau(this, '{{$row->ID}}')" title="Xem chi tiết {{$row->TEN_BIEU_MAU}}"><span class="glyphicon glyphicon-file"></span></p>
                    </td>
                </tr>
                @endif
                @endforeach
                @if($numRows <= 0)
                <tr>
                    <td colspan="3"><span class="red glyphicon glyphicon-warning-sign">&nbsp;</span>Chưa có đơn nào.</td>
                </tr>
                @endif
            </tbody>
        </table>  
        <!--Kết thúc bảng danh sách đơn-->
        <!--Phân trang bảng danh sách đơn-->
        <div class="text-right">
            {{$data->links()}}
        </div>	
        <!--Kết thúc phan trang danh sách đơn--> 
    </div>
    

<script type="text/javascript">
    $(document).ready(function () {
        $("#search").keyup(function (e) {
            if (e.which === 13) {
                search();
            }
        });
        
        $("#btnsearch").on("click", function (e) {
            search();
        });

        function search()
        {
            var key = fulltrim($("#search").val());
            if (key === null || key === "")
            {
                toastr.error("Vui lòng nhập chuỗi cần tìm kiếm!");
            }
            else
            {
                var url = $("#urlsearch").val() + "?key=" + key;
                location.href = url;
            }
        }
    });
</script>
@if(Session::has('warning')) 
<script type="text/javascript">
    toastr.warning("{{Session::get('warning')}}");
</script>
@endif
@if(Session::has('error')) 
<script type="text/javascript">
    toastr.error("{{Session::get('error')}}");
</script>
@endif
@if(isset($warning)) 
<script type="text/javascript">
    toastr.warning("{{$warning}}");
    window.history.pushState(null, "{{$title}}", "{{$url}}");
</script>
@endif

    <div class="modal" id="donWin" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 21cm; margin-top: 70px">
            <div class="modal-content">
                <div class="modal-body" style="padding: 2px !important; height: 600px;">
                    <iframe id="iDon" src="" width="99.6%" height="99.6%" frameborder="0"></iframe>
                    <div id="toolbar" class="btn-group-vertical" style="display: none; position: fixed; top: 70px; left: 237px;"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('#donWin').on('hidden.bs.modal', function() {
            $('#toolbar').empty();
            $('#toolbar').css('display', 'none');
            $('iframe').attr('src', '');
        });
    </script>

<script>
    function xemMau(elmnt,clr) {
        $(".xemBtn").attr('data-toggle','modal');
        $(".xemBtn").attr('data-target','#donWin');
        $("#iDon").attr('src','view=dshosott?id='+clr);
    }
</script>